<template>
    <div class="home-index">
        <Row style="margin-bottom: 30px;">
            <!-- 账号信息 -->
            <Col class="float_left width_50 padding_right_10 height_200px">
            <Card class="top-border">
                <p slot="title">账号信息</p>
                <div class="row_item">
                    <div class="float_left width_100px">用户名称</div>
                    <div class="margin_left_100">{{profile.ANickName ? profile.ANickName : '-'}}</div>
                </div>

                <div class="row_item" v-if="false">
                    <div class="float_left width_100px">易撰ID：</div>
                    <div class="margin_left_100">{{profile.AID ? profile.AID : '-'}}</div>
                </div>

                <div class="row_item">
                    <div class="float_left width_100px">身份标识：</div>
                    <div class="margin_left_100">
                        <span class="inline-block">{{profile.isVIP ? 'VIP' : '试用版'}}</span>
                        <span v-if="false"><button class="btn btn-primary"
                                      @click="showUpgradeVIPModal">{{profile.isVIP ? '续费' : '升级VIP'}}</button></span>
                    </div>
                </div>

                <div class="row_item" v-if="false">
                    <div class="float_left width_100px">到期时间：</div>
                    <div class="margin_left_100">{{profile.RDate ? profile.RDate : '-'}}</div>
                </div>
            </Card>
            </Col >

            <!-- 资金管理 -->
            <Col class="float_left width_50 padding_left_10 height_200px">
            <Card class="top-border">
                <p slot="title">资金管理</p>
                <div class="row_item">
                    <div class="float_left width_100px">易豆：</div>
                    <div class="margin_left_100">
                        <span class="inline-block">￥{{profile.ABalance ? profile.ABalance : 0}}</span>
                        <span><button class="btn btn-primary" @click="showChargeModal">充值</button></span>
                    </div>
                </div>
                <div class="row_item margin_top_10">
                    <div class="float_left width_100px">问答收益：</div>
                    <div class="margin_left_100">
                        <span class="inline-block">￥{{profile.QABalance ? profile.QABalance : 0}}</span>
                        <span><button class="btn btn-primary" @click="showQaqEarningModal">查看</button></span>
                    </div>
                </div>
            </Card>
            </Col >
        </Row>

        <!-- 安全中心 -->
        <safety-comp :mobile="profile.AMobile" @bind-mobile="showBindMobileModal"
                     @update-pwd="showRetPwdModal()"></safety-comp>

        <!-- banner -->
        <swiper-comp></swiper-comp>

        <!-- 新闻 -->
        <msg-record-comp></msg-record-comp>


        <div v-if="modalType != ''">
            <charge-modal v-if="modalType == 'chargeModal'" :profile="profile" @close-modal="closeModal"></charge-modal>
            <upgrade-v-i-p-comp v-if="modalType == 'upgradeVIPComp'" :profile="profile"
                                @close-modal="closeModal"></upgrade-v-i-p-comp>
            <bind-mobile v-if="modalType == 'bindMobile'" :bind-type="bindType" @set-mobile="setMobile"
                         @close-modal="closeModal"></bind-mobile>
        </div>

        <reset-pwd-modal :modal-status="resetPwdModalStatus" @forget-password="showForgetPwdModal"
                         @close-modal="resetPwdModalStatus = false;"></reset-pwd-modal>
        <forget-pwd-modal :modal-status="forgetPwdModalStatus"
                          @close-modal="forgetPwdModalStatus = false;"></forget-pwd-modal>
        <qaq-earning-modal :modal-status="qaqEarningModalStatus"
                           @close-modal="qaqEarningModalStatus = false;"></qaq-earning-modal>

        <firstLogin :first-login="firstLogin" v-if="isFirstLogin" @close-modal="closeFirstLogin"></firstLogin>

    </div>
</template>

<script type="text/ecmascript-6">

    import chargeModal from './homeIndex/chargeModal.vue'
    import resetPwdModal from './homeIndex/resetPwdModal.vue'
    import swiperComp from './homeIndex/swiperComp.vue'
    import msgRecordComp from './homeIndex/msgRecordComp.vue'
    import safetyComp from './homeIndex/safetyComp.vue'
    import forgetPwdModal from './homeIndex/forgetPwdModal.vue'
    import upgradeVIPComp from './homeIndex/upgradeVIPComp.vue'
    import bindMobile from './homeIndex/bindMobile.vue'
    import qaqEarningModal from './homeIndex/qaqEarningModal.vue'
    import firstLogin from './homeIndex/firstLogin.vue'
    import getData from '../../api/getData'

    // 该页面的逻辑
    var homeIndexLogic = {

    };

    export default {
        data: function () {
            return {
                profile: {},
                firstLogin:true,
                // 模态框的类型
                modalType: "",
                // 绑定手机类型： 0未绑定，1解绑
                bindType: 0,
                resetPwdModalStatus: false,
                forgetPwdModalStatus: false,
                qaqEarningModalStatus: false,
                // 是否是第一次登录，如果是第一次登录，则显示设置向导，否则，不显示向导
                isFirstLogin: false,
            }
        },
        created: function () {

            this.getSelf();

        },
        methods: {
            //获取个人信息
            getSelf (){
                var self = this;
                getData.post("getSelf")
                    .then(function (response) {
                        if (response.data.code == 0) {
                            var tempData = response.data.data;
                            self.profile = tempData;
                            sessionStorage.setItem('YZ_AID', tempData.AID);

//                            0 为首次 1为不是首次
                            if(!tempData.AISRegister){
                                self.isFirstLogin = true;
                            }

                        } else {
                            self.$Message.info(response.data.msg ? response.data.msg : '网络错误，请稍后重试');
                        }

                    })
                    .catch(function (response) {
                        self.$Message.info('网络错误，请联系客服');
                    });
            },
            //显示充值模态框
            showChargeModal: function () {
                this.modalType = "chargeModal";
            },
            // 显示绑定手机模态框
            showBindMobileModal: function (data) {
                this.modalType = "bindMobile";
                this.bindType = data;
            },
            // 显示修改密码模态框
            showRetPwdModal: function () {
                this.resetPwdModalStatus = true;
            },
            //显示忘记密码模态框
            showForgetPwdModal: function () {
                this.forgetPwdModalStatus = true;
            },
            //显示问答收益模态框
            showQaqEarningModal: function () {
                this.qaqEarningModalStatus = true;
            },
            // 显示升级VIP模态框
            showUpgradeVIPModal: function () {
                this.modalType = "upgradeVIPComp";
            },
            // 关闭模态框
            closeModal: function () {
                this.modalType = "";
            },
            //设置新绑定的手机号
            setMobile: function (mobile) {
                this.profile.AMobile = mobile;
            },
            closeFirstLogin:function(){
                this.firstLogin = false;
                this.$Message.info('初始化设置成功')
            }
        },
        components: {
            upgradeVIPComp,
            forgetPwdModal,
            safetyComp,
            resetPwdModal,
            msgRecordComp,
            swiperComp,
            chargeModal,
            bindMobile,
            qaqEarningModal,
            firstLogin
        }
    }
</script>

<style lang="scss">
    .home-index {

        /*小标题*/
        .heading-sm {
            position: relative;
            color: #222;
            font-size: 14px;
            font-weight: 100;
            line-height: 24px;
            margin: 20px 0;
        }

        .top-border {
            border: 1px solid #e4e4e4;
            height: 210px;
        }

        .ivu-card:hover {
            box-shadow: none;
        }

        .inline-block {
            display: inline-block;
            width: 90px;
        }

    }

    .vertical-center-modal {
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal {
            top: 0;
        }
    }

    .ivu-modal-footer {
        text-align: center;
    }
</style>
